


<template>
	<div class="realTime" :style="{ height: `calc(100vh - ${setMainHeight}` }">
		<el-card class="box-card" :style="{ height: `calc(100vh - ${setMainHeight}` }" style="overflow: auto">
			<!-- 左侧树形结构 -->
			<!-- <div class="leftTree">
				<el-tree :data="treeData" node-key="id" :default-expand-all="true" :props="defaultProps"> </el-tree>
			</div> -->

			<!-- 右侧摄像头图片 -->
			<!-- class="pic" -->
			<!-- style="display: ruby" -->
			<div class="innerbox" >
				<div  v-for="item in videoList" :key="item.id" style="width: 33.3%;height: 33.3%">
					<video :id="item.id" controls autoplay muted width="100%" height="100%" style="object-fit: fill"></video>
				</div>
			</div>
		</el-card>
	</div>
</template> 
<script>
  export default {
    name: "realTime",
    components: {},
    data() {
      return {
		videoList: [
			{
				id: 'video0',
			},
			{
				id: 'video1',
			},
			{
				id: 'video2',
			},
			// {
			// 	id: 'video3',
			// },
			// {
			// 	id: 'video4',
			// },
			// {
			// 	id: 'video5',
			// },
			// {
			// 	id: 'video6',
			// },
			// {
			// 	id: 'video7',
			// },
			// {
			// 	id: 'video8',
			// },
		],		
        webRtcServerList: [],
        camera_ip: '127.0.0.1:8000' //这里看自己的需要，也可以传入另一台电脑的ip，前提是都得在在一个局域网内
      }
    },
    mounted() {
	  this.$nextTick(() => {
		//video：需要绑定的video控件ID
		//127.0.0.1:8000：启动webrtc-streamer的设备IP和端口，默认8000
		this.videoList.forEach(item => {
			let webRtcServer = new WebRtcStreamer(item.id, location.protocol + '//' + this.camera_ip)
			//需要查看的rtsp地址,根据自己的摄像头传入对应的rtsp地址即可。注意：视频编码格式必须是H264的，否则无法正常显示，编码格式可在摄像头的后台更改
			webRtcServer.connect('rtsp://admin:toec,357@192.168.1.66//Streaming/Channels/1')
			this.webRtcServerList.push(webRtcServer)
		})
		
	  })

    },
    //销毁视频流
    beforeDestroy() {
	  let length = this.webRtcServerList.length
	  for(let i = 0; i < length; i++){
		let webRtcServer = this.webRtcServerList.pop()
		webRtcServer.disconnect()
		webRtcServer = null
	  }

    }
  };
</script>

<style scoped lang="scss">
.realTime {
	::v-deep .el-card__body {
		width: 100%;
		height: 100%;
		display: flex;

		.leftTree {
			flex: 1;
			margin-right: 20px;
		}
		.innerbox {
			flex: 9;
			display: flex;
			flex-wrap: wrap;
			.pic {
				width: 33.3%;
				height: 26vh;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}
</style>